<template>
    <div class="big-box">
        <div class="header">
            <img src="../../../../../assets/bigScreen/header1.png" alt="" />
			<div class="backBox" @click="goBack"></div>
        </div>
        <div class="backToBox">
            <div class="backTo" @click="gotoHome">
                <div>返回总窗口</div>
            </div>
            <div class="backTo" @click="backToOne">
                <div>返回上一页</div>
            </div>
        </div>
        <div class="centerBox">
            <div class="sreenTitle">现有人才</div>
            <div class="center">
                
		<div class="contenBox">
			<div class="contenBox-left">
				<div class="contenBox-left-top">
					<img v-if="detail.image" :src="detail.image[0] == '/' ? baseURL + detail.image : detail.image"
						alt="暂无图片">
					<img v-else-if="detail.logo" :src="detail.logo[0] == '/' ? baseURL + detail.logo : detail.logo"
						alt="暂无图片">
					<img v-else-if="detail.photo" :src="detail.photo[0] == '/' ? baseURL + detail.photo : detail.photo"
						alt="暂无图片">
					<img src="../../../../../assets/photo.png" v-else>
					<div class="contenBox-left-top-name">{{detail.name}}</div>
				</div>
				<div class="contenBox-left-bottom">
					<div class="contenBox-left-bottom-item">领域：{{ detail.technical || detail.fields
 || detail.majorStudied || detail.researchField || detail.innovationAreas || detail.serveIndustry || detail.type || detail.specialty || detail.entrepreneurialField ||'暂无' }}</div>
					<div class="contenBox-left-bottom-item">单位： {{ detail.unit || detail.supportUnit || detail.workUnit || detail.deptName || detail.work || detail.remark || detail.organization ||'暂无'}}</div>
					<div class="contenBox-left-bottom-item">职称： {{detail.professionalTitle || detail.jobTitle || detail.technicalQualification || detail.title || detail.jobTitleLevel ||'暂无'}}</div>
					<div class="contenBox-left-bottom-item">职务： {{detail.post || detail.position || detail.duties ||'暂无'}}</div>
					<div class="contenBox-left-bottom-item">地区： {{detail.city || detail.manage || detail.location || detail.serveCity || detail.areaCode || detail.address || detail.organizationName ||'暂无'}}</div>
					<!-- <div class="contenBox-left-bottom-item">头衔： {{detail.label||'暂无'}}</div> -->
					<div class="contenBox-left-bottom-item">电话： {{ detail.phone || detail.mobile || detail.contactNumber || detail.tel ||'暂无'}}</div>
				</div>
			</div>
			<div class="contenBox-right">
				<div class="add-box" style="margin-top:3rem;margin-left:4rem">
					<div class="add-title">简介或案例</div>
					<!-- <div class="add-btn">查看更多</div> -->
				</div>
				<div class="contenBox-right-content" v-html="detail.introduction || detail.selectionBasis || detail.unitInnovations || detail.serveContent || detail.remark || detail.researchDirection || '暂无'">
					
				</div>
				<!-- {{detail.introduction}} -->
			</div>
		</div>
            </div>
        </div>
    </div>
</template>

<script>
	import {
		baseUrl
	} from '../../../../../../config';
	import {
		ref,
		reactive,
		onBeforeMount
	} from "vue"
	import headerBox from "../../../../../components/header.vue"
	import headerImg from "../../../../../components/headerImg.vue"
	import footerBox from "../../../../../components/footer-box.vue"
	import {
		getExpertDetail,
		appAuth,
		getGrasslandPersonDetail,
		getAcademicianPersonDetail,
		getInnovatePersonDetail,
		getStartBusinessPersonDetail,
		getCompanySpecialPersonDetail,
		getIntroducePersonDetail,
		getHighEndPersonDetail,
		correspondentDetail,
		getLeaderPersonDetail,
		getYoungPersonDetail,
		getHighSchoolDetail
	} from "../../../../../api/scientificResearch.js"
	import {
		putDemand
	} from "../../../../../api/globalSearch"
	import {
		getInvestorDetail
	} from '../../../../../api/capital';
	import {
		financialAdvisorDetail
	} from "../../../../../api/capital.js"
	import {
		getAgentInfo
	} from "../../../../../api/gain.js"
	export default {
		components: {
			headerBox,
			headerImg,
			footerBox
		},
		data() {
			return {
				baseURL: undefined,
				wrapperStyle: {
					width: '20rem'
				},
				list: [],
				name: '',
				phone: '',
				deptName: '',
				remark: '',
				size: 'default', //输入框尺寸
				formItemLayout: {
					labelCol: {
						span: 10
					},
					wrapperCol: {
						span: 14
					}
				},
				formItemLayoutAll: {
					labelCol: {
						span: 5
					},
					wrapperCol: {
						span: 19
					}
				},
				id: '',
				detail: {}
			}
		},
		mounted() {
			this.baseURL = baseUrl
			if (this.$route.query.id) {
				this.id = this.$route.query.id;
			}
			this.init();
		},
		methods: {
			// 阻止点击的默认事件修改路由
			handleAnchorClick(e, link) {
				e.preventDefault();
				var srcolls = document.getElementById(link.href);
				srcolls.scrollIntoView({
					block: 'start',
					behavior: 'smooth'
				});
			},
			toDetail(item, type) {
				console.log(item.id);
				var url = '';
				if (type == 1) { //科技研发需求
					url = '/requirementDetail'
				}
				// if (type == 3) {
				// url = '/scientificOrgDetail'
				// }
				if (type == 2) { //科研人才需求
					url = '/requirementDetailOther'
				}
				this.$router.push({
					path: url,
					query: {
						id: item.id
					}
				})
			},
			getMatch() {
				// console.log(item.id);
				putDemand({
					industry: this.detail.industry
				}).then((response) => {
					this.list.value = [];
					if (response.code == 200) {
						this.list = response.data;
					} else {
						this.list = []
					}
				}).catch(err => {
					this.list = []
				})
			},
			//点击提交按钮
			handleSearch(e) {
				// console.log(e);
				// e.preventDefault();
				if (!this.name) {
					this.$message.warning('请输入姓名!')
					return false;
				}
				if (!this.phone) {
					this.$message.warning('请输入联系方式!')
					return false;
				}
				var datas = {
					type: 2,
					name: this.name,
					phone: this.phone,
					remark: this.remark,
					deptName: this.deptName,
				}
				appAuth(datas).then(res => {
					if (res.code === 200) {
						this.$message.success('提交成功');
					}
				})

				// this.form.validateFields(err => {
				// 	//表单校验
				// 	if (!err) {
				// 		let message = this.form.getFieldsValue();
				// 		let params = {
				// 			...message,
				// 		}; //请求参数

				// 		console.log(params);
				// 		// return;

				// 		//调用api中get请求接口
				// 		if (this.$route.query.id) {
				// 			//修改
				// 			params.id = this.$route.query.id;
				// 			this.$https.fetchPut('/tic/inspector', params).then(data => {
				// 				if (data.data.code === 200) {
				// 					this.$message.success('修改成功');
				// 					// this.$router.go(-1); //返回上一层
				// 					this.goBack();
				// 				}
				// 			}).catch(err => {});
				// 		} else {
				// 			//新建
				// 			this.$https.fetchPost('/tic/inspector', params).then(data => {
				// 				if (data.data.code === 200) {
				// 					this.$message.success('新增成功');
				// 					// this.$router.go(-1); //返回上一层
				// 					this.goBack();
				// 				}
				// 			}).catch(err => {});
				// 		}
				// 	}
				// });
			},

			toPage() {
				this.$router.push({
					path: '/technologyDevelopScientificResearch'
				})
			},
			init() {
				switch(this.$route.query.personType) {
					case '0':
						getExpertDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
								this.getMatch();
							}
						})
						break
					case '1':
						getInvestorDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
								// this.getMatch();
							}
						});
						break
					case '2':
						financialAdvisorDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '3':
						correspondentDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '4':
						getCompanySpecialPersonDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '5':
						getAgentInfo({id: this.id}).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '6':
						getGrasslandPersonDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '7':
						getIntroducePersonDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '8':
						getHighEndPersonDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '9':
						getAcademicianPersonDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '10':
						getInnovatePersonDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '11':
						getStartBusinessPersonDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '12':
						getLeaderPersonDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '13':
						getYoungPersonDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
					case '14':
						getHighSchoolDetail(this.id).then(res => {
							if (res.code === 200) {
								this.detail = res.data;
							}
						})
						break
				}
			},
        gotoHome() {
            this.$router.push({
                path: '/bigScreenIndex',
            })
        },
        backToOne() {
            console.log('11');
            this.$router.go(-1)
        },
		goBack() {
            this.$router.push('/chart')
        }
		}
	}
</script>

<style scoped lang="scss">
@font-face {
    font-family: "ffa";
    src: url(../../../assets/bigScreen/fonts/DS-DIGIB.TTF);
}
ul,
li {
    list-style: none;
}
.big-box {
    background-color: #071c3b;
    height: 100vh;
}
.header {
	position: relative;
    text-align: center;
    position: relative;
    height: 19.1rem;

	.backBox {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70rem;
        height: 10rem;
        cursor: pointer;
    }

    > img {
        width: 100%;
        max-height: 100%;
        margin-top: -1.1rem;
        image-rendering: -moz-crisp-edges; /* Firefox */
        image-rendering: -o-crisp-edges; /* Opera */
        image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
    }
}
.centerBox {
    width: 96%;
    margin: 0 auto;
    position: absolute;
    top: 14rem;
    left: 2%;
    .sreenTitle {
        background-image: url("../../../../../assets/bigScreen/sreenTitle.png");
        background-size: 100% 100%;
        height: 3.8rem;
        padding-left: 35px;
        font-weight: 600;
        color: #fff;
        display: flex;
        align-items: center;
    }
    .center {
        margin-top: 1rem;
        height: calc(100vh - 20rem);
        border: 1px solid;
        border-image: linear-gradient(
                130deg,
                #2385df 0%,
                rgba(35, 133, 223, 0.65) 92%
            )
            1;
        overflow-y: scroll;
        padding: 20px;
        
		.contenBox {
			display: flex;
			justify-content: space-between;
			width: 140rem;
			min-height: 46rem;
			border-radius: 8px;
			background: #082853;
			border: 1px solid #4494ff46;
			margin: 3rem auto 10rem;
			padding-top: 3rem;
						color: #fff;

			.contenBox-left {
				width: 50rem;
				height: 100%;
				border-right: 1px solid #4494ff46;

				.contenBox-left-top {
					display: flex;
					justify-content: left;
					align-items: center;
					height: 15rem;
					border-bottom: 1px solid #d8d8d8;
					padding: 2.8rem 4rem;

					img {
						width: 10rem;
						height: 10rem;
						border-radius: 50%;
					}

					.contenBox-left-top-name {
						font-size: 2.4rem;
						color: #fff;
						margin-left: 3rem;
					}
				}

				.contenBox-left-bottom {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					padding: 3.3rem 4rem;

					.contenBox-left-bottom-item {
						width: 50%;
						padding-bottom: 2rem;
						color: #fff;
						font-size: 1.6rem;
						padding: 2rem;
					}
				}
			}

			.contenBox-right {
				width: 90rem;

				.add-box {
					width: 90rem;
					height: 6.5rem;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.add-title {
						display: flex;
						align-items: center;
						font-size: 2.2rem;
						font-weight: bold;
						color: #fff;

						&::before {
							content: "";
							display: block;
							width: 0.5rem;
							height: 3rem;
							background: #037aff;
							margin-right: 1rem;
						}
					}

					.add-btn {
						width: 13rem;
						height: 4.5rem;
						text-align: center;
						line-height: calc(4.5rem - 4px);
						border-radius: 4px;
						border: 1px solid #037aff;
						font-size: 1.6rem;
						color: #037aff;
						cursor: pointer;
					}
				}

				.contenBox-right-content {
					padding: 3.5rem 4rem;
					color: #fff;
					font-size: 1.6rem;
					text-indent: 2em;
				}
			}
		}
    }
    ::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        background-color: #234470;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        background-color: #061c57;
    }

    /* 鼠标悬停在滚动条上的滑块 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }
}
.backToBox {
    position: absolute;
    top: 8rem;
    right: 2%;
    display: flex;
    z-index: 10;
    .backTo {
        background-image: url("../../../../../assets/bigScreen/backTo.png");
        color: #2dccff;
        background-size: 100% 100%;
        width: fit-content;
        padding: 2px 40px 10px 10px;
        font-weight: 600;
        cursor: pointer;
        margin-left: 10px;
        div {
            padding-top: 5px;
        }
    }
}
</style>
